// 获取学生信息,并渲染到页面
const getStudentInfo = async ()=>{
    const {data} = await axios.get('/student/list')
    // console.log(data);
    document.querySelector('tbody').innerHTML = data.data.map(item => `
    <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id=${item.id}>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id=${item.id}>删除</button>
        </td>
      </tr>
    `).join('')
}
// 渲染页面
getStudentInfo()

let id = ''
// 添加功能
document.querySelector('.btnAddStu').addEventListener('click',()=>{
    $('#addModal').modal('show')
    getProvince()
    id = ''
})

// 省市县三级联动
// 获取省市县三个下拉菜单
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const county = document.querySelector('[name="county"]')


// 省变的时候,市变
province.addEventListener('change',function(){
    getCity()
    // getCounty()
})
// 市变的时候,区/县变
city.addEventListener('change',function(){
    getCounty()
    
})
// 获取省
const getProvince = async ()=>{
    const {data} = await axios('/geo/province')
    // console.log(data);
    province.innerHTML = `<option>--省--</option>` + data.map(item =>`<option value="${item}">${item}</option>`).join('')
}

// 获取市
const getCity = async ()=>{
    const {data} = await axios(`/geo/city?pname=${province.value}`)
    // console.log(data);
    city.innerHTML = `<option>--市--</option>` + data.map(item =>`<option value="${item}">${item}</option>`).join('')
}

// 获取区/县
const getCounty = async ()=>{
    const {data} = await axios(`/geo/county?pname=${province.value}&cname=${city.value}`)
    // console.log(data);
    county.innerHTML = `<option>--区/县--</option>` + data.map(item =>`<option value="${item}">${item}</option>`).join('')
}

// 点击确定按钮,将需要添加的信息传入到服务器中
document.querySelector('.btnAddStudent').addEventListener('click',async function(e){
    e.preventDefault()
    // 使用FormData收集表单中所有的数据
    const fd = new FormData(document.querySelector('form'))

    // 因为FromData会自动更改请求头的格式,需要把数据转换成对象
    const obj = {}

    // 收集到表单所有的数据
    fd.forEach((value,key)=>{
        obj[key] = value
    })

    console.log(obj);
    // 接口文档指定某些数据必须为数值型
    // obj.age = +obj.age
    // obj.group = +obj.group
    // obj.phone = +obj.phone
    // obj.salary = +obj.salary
    // obj.truesalary = +obj.truesalary

    // 判断数据的合法性
    // if(obj.age.length > 2 || obj.group.length >2 || obj.phone.length > 11){
    //     return Toast.fail('请输入正确的格式')
    // }else if(  (obj.salary < 100 || obj.salary > 99999) || (obj.truesalary < 100 || obj.truesalary > 99999)){
    //     return Toast.fail('期望工资或实际工资范围不正确')
    // }else if( Object.values(obj).some(item => item ==='')){
    //     return Toast.fail('表单内容不能为空')
    //    }
    // 将收集到的数据传入到服务器
    if(id){
        obj.id = id
        console.log(id);
        const {data} = await axios.put(`/student/update?id=${id}`,obj)
        console.log(data);
        Toast.success('修改成功')
    }else {
        const {data} = await axios.post('/student/add',obj)
        // debugger
        console.log(data);
        Toast.success('添加成功')
    }
   

    // 传入服务器之后,关闭模态框
    $('#addModal').modal('hide')
    // 渲染页面
    getStudentInfo()
    document.querySelector('form').reset()
})

// 点击叉叉,将表单内容刷新
document.querySelector('.btn-close').addEventListener('click',function(){
    document.querySelector('form').reset()
})


// 利用事件委托来实现编辑和删除功能
document.querySelector('tbody').addEventListener('click',async function(e){
    // 如果点的是编辑按钮就进行判断
    if(e.target.classList.contains('btn-primary')){
        // 显示模态框
        $('#addModal').modal('show')

        // console.log(e.target.dataset.id);
        // 获取当前学生的所有信息
        const {data}  = await axios.get(`/student/one?id=${e.target.dataset.id}` )
        console.log(data);
        
        // 将获取到的个人信息渲染到表单上
        document.querySelector('[name="name"]').value = data.data.name
        document.querySelector('[name="age"]').value = data.data.age
        document.querySelector('[name="group"]').value = data.data.group
        document.querySelector('[name="sex"]').value = data.data.sex
        document.querySelector('[name="phone"]').value = data.data.phone
        document.querySelector('[name="salary"]').value = data.data.salary
        document.querySelector('[name="truesalary"]').value = data.data.truesalary

        // 获取省
       await getProvince()
       province.value = data.data.province
        // 获取市
       await getCity()
       city.value = data.data.city
        // 获取省
       await getCounty()
       county.value = data.data.county

        id = data.data.id
        
    }else if(e.target.classList.contains('btn-danger')){
        // 删除学生信息
        const {data} = await axios.delete(`/student/delete?id=${e.target.dataset.id}`)
        getStudentInfo()
        Toast.success('删除成功')
    }
})